<% title @article.title_with_query_preamble(user_signed_in?) %>

<style>
  .html-variant-wrapper { display: none}
</style>

<% if @article.processed_html.include?("https://embed.bsky.app/static/embed.js") %>
  <link rel="preload" href="https://embed.bsky.app/static/embed.js" as="script">
<% end %>

<% if @article.processed_html.include?("data-animated") %>
  <%= javascript_include_tag "articleAnimations", defer: true %>
<% end %>

<%= render "shared/webcomponents_loader_script" %>
<% if user_signed_in? && @article.type_of != "fullscreen_embed" %>
  <%= javascript_include_tag "webShare", "articlePage", "articleSignedIn", "articleModerationTools", "commentDropdowns", defer: true %>
<% elsif @article.type_of != "fullscreen_embed" %>
  <%= javascript_include_tag "webShare", "articlePage", "commentDropdowns", defer: true %>
<% end %>

<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @article_json_ld.to_json.html_safe %>
  </script>
<% end %>

<% if internal_navigation? %>
  <!-- You may be seeing the canonical URL in the body for human inspection -->
  <!-- This is because of navigation via InstantClick, instantclick.io -->
  <!-- However, the crawled version of the page has the canonical in the head. -->
  <!-- This is confirmed by the canonical url inspector. See https://github.com/forem/forem/issues/9509#issuecomment-732259221. -->
  <link rel="canonical" href="<%= @article.canonical_url.presence || app_url(@article.path) %>" />
  <meta name="description" content="<%= @article.description_and_tags %>">
  <%= meta_keywords_article(@article.cached_tag_list) %>
<% else %>
  <%= content_for :page_meta do %>
    <link rel="preload" href="/reactions?article_id=<%= @article.id %>" as="fetch" crossorigin="same-origin">
    <link rel="canonical" href="<%= @article.canonical_url.presence || app_url(@article.path) %>" />
    <meta name="description" content="<%= @article.description_and_tags %>">
    <%= meta_keywords_article(@article.cached_tag_list) %>

    <meta property="og:type" content="article" />
    <meta property="og:url" content="<%= article_url(@article) %>" />
    <meta property="og:title" content="<%= @article.title_for_metadata %>" />
    <meta property="og:description" content="<%= @article.description || t("views.articles.meta.description") %>" />
    <meta property="og:site_name" content="<%= community_name %>" />
    <meta name="twitter:site" content="@<%= Settings::General.social_media_handles["twitter"] %>">
    <meta name="twitter:creator" content="@<%= @user.twitter_username %>">
    <meta name="twitter:title" content="<%= @article.title_for_metadata %>">
    <meta name="twitter:description" content="<%= @article.description || t("views.articles.meta.description") %>">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:widgets:new-embed-design" content="on">
    <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
    <% if @article.published %>
      <meta property="og:image" content="<%= article_social_image_url(@article) %>" />
      <meta name="twitter:image:src" content="<%= article_social_image_url(@article) %>">
    <% end %>
    <% if @article.skip_indexing? %>
      <meta name="robots" content="noindex">
      <meta name="robots" content="nofollow">
    <% end %>
  <% end %>
<% end %>

    <% if @article.type_of == "fullscreen_embed" %>
      <%= render "articles/fullscreen_embed" %>
<% else %>
  <div class="crayons-layout crayons-layout--3-cols crayons-layout--article">
    <aside class="crayons-layout__sidebar-left" aria-label="<%= t("views.articles.actions.aria_label") %>">
      <%= render "articles/actions" %>
    </aside>

    <main id="main-content" class="crayons-layout__content grid gap-4">
      <div class="article-wrapper">
        <% unless @article.current_state.published? %>
          <div class="crayons-notice crayons-notice--danger mb-4" aria-live="polite">
            <strong><%= t("views.articles.#{@article.current_state}.subtitle") %></strong><%= t("views.articles.#{@article.current_state}.text") %>
            <% if user_signed_in? %>
              <a id="author-click-to-edit" href="<%= @article.path %>/edit" class="fw-bold" style="display: none;"><%= t("views.articles.#{@article.current_state}.edit") %></a>
            <% end %>
          </div>
        <% end %>

        <% if @article.video_state == "PROGRESSING" %>
          <div class="crayons-notice crayons-notice--warning mb-4" aria-live="polite"><%= t("views.editor.video.progress.heading") %></div>
        <% end %>

        <article class="crayons-card crayons-article mb-4"
          id="article-show-container"
          data-article-id="<%= @article.id %>"
          data-article-slug="<%= @article.slug %>"
          data-author-id="<%= @article.user_id %>"
          data-author-name="<%= @article.cached_user_name %>"
          data-author-username="<%= @article.username %>"
          data-co-author-ids="<%= @article.co_author_ids.join(",") %>"
          data-path="<%= @article.path %>"
          data-pin-path="<%= stories_feed_pinned_article_path %>"
          data-pinned-article-id="<%= @pinned_article_id %>"
          data-published="<%= @article.published? %>"
          data-scheduled="<%= @article.scheduled? %>"
          <%= @article.language? ? "lang=#{@article.language}" : " " %>
          <%= @article.pinned? ? "data-pinned" : " " %>>
          <script>
            try {
              if(localStorage) {
                let currentUser = localStorage.getItem('current_user');

                if (currentUser) {
                  currentUser = JSON.parse(currentUser);
                  if (currentUser.id === <%= @article.user_id %>) {
                    document.getElementById('article-show-container').classList.add('current-user-is-article-author');
                  }
                }
              }
            } catch (e) {
              console.error(e);
            }
          </script>
          <header class="crayons-article__header" id="main-title">
            <% if @article.video&.include?("youtube.com") || @article.video&.include?("player.mux.com") || @article.video&.include?("player.twitch.tv") %>
              <div class="crayons-article__cover" style="width:100%; aspect-ratio:16/9; position:relative;">
                <iframe
                  src="<%= @article.video %>"
                  style="border:0; position:absolute; top:0; left:0; width:100%; height:100%;"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowfullscreen
                  title="<%= @article.title_for_metadata %>"
                ></iframe>
              </div>
            <% elsif @article.video.present? %>
              <%= render "articles/video_player", meta_tags: true, article: @article %>
            <% elsif @article.main_image.present? %>
              <a class="crayons-article__cover" href="<%= cloud_cover_url(@article.main_image) %>">
                <img
                  src="<%= cloud_cover_url(@article.main_image) %>"
                  style="aspect-ratio: auto 1000 / <%= @article.main_image_height %>;"
                  width="1000" height="<%= @article.main_image_height %>"
                  class="crayons-article__cover__image" alt="Cover image for <%= @article.title %>">
              </a>
            <% end %>

            <div class="crayons-article__header__meta">
              <div class="flex s:items-start flex-col s:flex-row">
                <div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div>
                <div class="flex flex-1 mb-5 items-start">
                  <div class="relative">
                    <% if @organization %>
                      <a href="<%= @organization.path %>"><img src="<%= @organization.profile_image_url_for(length: 50) %>" class="radius-default align-middle" width="40" height="40" alt="<%= @organization.name %> profile image"></a>
                      <a href="/<%= @user.username %>" class="absolute -right-2 -bottom-2 radius-full border border-solid border-2 border-base-inverted inline-flex">
                        <img class="radius-full align-middle" src="<%= @user.profile_image_url_for(length: 50) %>" width="24" height="24" alt="<%= @user.name %>" />
                      </a>
                    <% else %>
                      <a href="/<%= @user.username %>"><img class="radius-full align-middle" src="<%= @user.profile_image_url_for(length: 50) %>" width="40" height="40" alt="<%= @user.name %>" /></a>
                    <% end %>
                  </div>
                  <div class="pl-3 flex-1">
                    <a href="/<%= @user.username %>" class="crayons-link fw-bold"><%= @user.name %></a>
                    <%= subscription_icon(@user) %>
                    <% if @user.spam? %>
                      <span class="c-indicator c-indicator--danger">Spam</span>
                    <% end %>
                    <% if @organization %>
                      <%= t("views.articles.for_org_html",
                            start: tag("span", { class: "color-base-60" }, true),
                            end: "</span>".html_safe,
                            org: tag.a(@organization.name, href: @organization.path, class: "crayons-link")) %>
                    <% end %>
                    <p class="fs-xs color-base-60">
                      <% if @article.published_timestamp.present? %>
                        <%= t("views.articles.#{@article.current_state}_html", date: local_date(@article.published_timestamp, show_year: @article.displayable_published_at.year != Time.current.year)) %>
                      <% end %>
                      <% if @article.co_author_ids.present? %>
                        <%= t("views.articles.co_authors_html", names: @article.co_author_name_and_path.html_safe) %>
                      <% end %>

                      <% if should_show_updated_on?(@article) %>
                        &bull; <%= t("views.articles.edited_html", date: local_date(@article.edited_at, show_year: @article.edited_at.year != Time.current.year)) %>
                      <% end %>

                      <% if should_show_crossposted_on?(@article) %>
                        &bull; <%= t("views.articles.crossposted.text_html",
                                    url: link_to(get_host_without_www(@article.canonical_url || @article.feed_source_url), @article.canonical_url || @article.feed_source_url, style: "color:#1395b8"),
                                    on: if @article.crossposted_at
                                          t("views.articles.crossposted.on_html",
                                            date: local_date(@article.originally_published_at || @article.published_at, show_year: (@article.originally_published_at || @article.published_at).year != Time.current.year))
                                        else
                                          ""
                                        end) %>
                      <% end %>
                    </p>
                  </div>
                </div>
              </div>

              <%= render "articles/multiple_engagements" unless @article.public_reactions_count.zero? %>

              <h1 class=" <%= @article.type_of == "full_post" ? "fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy" : "fs-xl m:fs-2xl l:fs-3xl fw-normal" %> lh-tight mb-2 <%= @article.title_length_classification %>">
                <% if @article.search_optimized_title_preamble.present? && !user_signed_in? %>
                  <span class="fs-xl color-base-70 block"><%= @article.search_optimized_title_preamble %></span>
                <% end %>
                <%= @article.type_of == "status" ? @article.title_finalized : @article.title %>
              </h1>
              
              <% if @article.type_of == "full_post" %>
                <% cache("main-article-tags-#{@article.cached_tag_list_array.sort.join('-')}", expires_in: 72.hours) do %>
                  <div class="spec__tags flex flex-wrap">
                    <% @article.cached_tag_list_array.each do |tag| %>
                      <%= render_tag_link(tag) %>
                    <% end %>
                  </div>
                <% end %>
              <% end %>
            </div>
          </header>

          <div class="crayons-article__main <%= "pt-0" if @article.type_of == "status" %>">
            <% if @collection %>
              <%= render "articles/collection",
                        rendered_article: @article,
                        collection: @collection,
                        articles: @collection_articles %>
            <% end %>
            <% if @context_note %>
              <div class="crayons-article__context-note">
                <%= @context_note.processed_html.html_safe %>
              </div>
            <% end %>
            <div class="crayons-article__body text-styles spec__body" data-article-id="<%= @article.id %>" id="article-body">
              <% if @article.type_of == "status" && @article.processed_html_final.present? %>
                <% if user_signed_in? %>
                  <div class="pt-2">
                    <%= @article.processed_html_final.html_safe %>
                  </div>
                <% else %>
                  <a href="/enter?state=new-user" class="crayons-card p-4 fs-s block mt-2">
                    Sign in to view linked content
                  </a>
                <% end %>
              <% else %>
                <%= @article.processed_html_final.html_safe %>
              <% end %>
            </div>

            <% if @article.long_markdown? && @collection %>
              <%= render "articles/collection",
                        rendered_article: @article,
                        collection: @collection,
                        articles: @collection_articles %>
            <% end %>
            <% if @article.long_markdown? %>
              <div class="js-billboard-container body-billboard-container" data-async-url="<%= article_billboard_path(username: @article.username, slug: @article.slug, placement_area: :post_body_bottom) %>"></div>
            <% end %>
          </div>
          <%= render "articles/full_comment_area" %>

        </article>

        <div class="pb-4 crayons-layout__comments-billboard">
          <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="<%= article_billboard_path(username: @article.username, slug: @article.slug, placement_area: :post_comments) %>"></div>
        </div>

        <% if ApplicationConfig["SKIP_BOTTOM_CONTENT"] == "yes" %>
          <!-- Bottom content skipped via SKIP_BOTTOM_CONTENT config -->
        <% elsif user_signed_in? || internal_navigation? || ApplicationConfig["ASYNC_BOTTOM_CONTENT"] == "yes" %>
          <div id="aync-bottom-content" class="pb-4"></div>
        <% else %>
          <% cache("article-bottom-content-#{@article.id}-#{false}-#{(@organization || @user).latest_article_updated_at}", expires_in: 96.hours) do %>
            <% suggested_articles = Articles::Suggest.call(@article, max: 4) %>
            <%= render "articles/bottom_content", articles: suggested_articles %>
          <% end %>
        <% end %>
      </div>
    </main>

    <aside class="crayons-layout__sidebar-right" aria-label="<%= t("views.articles.right_nav") %>">
      <%= render "articles/sticky_nav" %>
    </aside>
  </div>

  <div class="mod-actions-menu print-hidden"></div>
  <div data-testid="unpublish-post-modal-container" class="unpublish-post-modal-container hidden"></div>
  <% if user_signed_in? %>
    <%= render "moderations/modals/suspend_user_modal" %>
    <%= render "moderations/modals/unsuspend_user_modal" %>
    <%= render "moderations/modals/unpublish_all_posts" %>
    <%= render "moderations/modals/unpublish_post_modal" %>
    <%= render "moderations/modals/flag_user_modal" %>
    <%= render "moderations/modals/unflag_user_modal" %>
  <% end %>

  <div class="fullscreen-code js-fullscreen-code"></div>
  <%= javascript_include_tag "billboard", "localizeArticleDates", "articleReactions", defer: true %>

  <script>
    <%# we consider these scripts safe for embedding as they come from our code %>
    <% if has_vid?(@article) %>
      if (document.getElementsByClassName('fluidvids').length === 0) {
        window.Fluidvids=function(a,b){"use strict";var c,d,e=b.head||b.head,f=".fluidvids-elem{position:absolute;top:0px;left:0px;width:100%;height:100%;border:none;}.fluidvids{width:100%;position:relative;}",g=function(a){return c=new RegExp("^(https?:)?//(?:"+d.join("|")+").*$","i"),c.test(a)},h=function(a){var c=b.createElement("div"),d=a.parentNode,e=100*(parseInt(a.height?a.height:a.offsetHeight,10)/parseInt(a.width?a.width:a.offsetWidth,10));d.insertBefore(c,a),a.className+=" fluidvids-elem",c.className+=" fluidvids",c.style.paddingTop=e+"%",c.appendChild(a)},i=function(){var a=b.createElement("div");a.innerHTML="<p>x</p><style>"+f+"</style>",e.appendChild(a.childNodes[1])},j=function(a){var c=a||{},e=c.selector||"iframe";d=c.players||["www.youtube.com","player.vimeo.com","clips.twitch.tv"];for(var f=b.querySelectorAll(e),j=0;j<f.length;j++){var k=f[j];g(k.src)&&h(k)}i()};return{init:j}}(window,document);
        Fluidvids.init({
          selector: ['iframe', 'object'], // runs querySelectorAll()
          players: ['www.youtube.com', 'player.vimeo.com', 'clips.twitch.tv'] // players to support
        });
      }
    <% end %>
    <% if @article.processed_html.include?("podcastliquidtag") %>
      <%== PodcastTag.script %>
    <% end %>
    <% if @article.processed_html.include?("ltag-poll") %>
      <%== PollTag.script %>
    <% end %>
    <% if @article.processed_html.include?("ltag-survey") %>
      <%== SurveyTag.script %>
    <% end %>
    <% if @article.processed_html.include?("tweet-embed") %>
      <%== TweetTag.script %>
    <% end %>
    <%# We should be able to make this conditional in future, but defines a global variable for now %>
    <%== RunkitTag.script %>
  </script>
  <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="<%= article_billboard_path(username: @article.username, slug: @article.slug, placement_area: :post_fixed_bottom) %>"></div>

  <% if user_signed_in? %>
    <div id="quickie-wrapper" class="hidden">
      <div class="crayons-modal">
        <div role="dialog" aria-modal="true" aria-label="modal" class="crayons-modal__box" style="max-width:800px">
          <header class="crayons-modal__box__header">
            <h2 class="crayons-subtitle-2">Boost Post to the Feed</h2>
            <button id="quickie-modal-close" type="button" aria-label="Close" class="c-btn c-btn--icon-alone crayons-modal__dismiss modal-close-el">
              <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="crayons-icon c-btn__icon"><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg>
            </button>
          </header><div class="crayons-modal__box__body">
          <div class="h-100 w-100">
            <%= render "articles/quickie_form", expanded: true %>
          </div>
        </div>
      </div>
      <div class="crayons-modal__backdrop modal-close-el"></div></div>
    </div>
    <script>
      document.querySelectorAll(".modal-close-el").forEach((el) => {
        el.addEventListener("click", () => {
          document.getElementById("quickie-wrapper").classList.add("hidden");
        });
      });
    </script>
  <% end %>
<% end %>
